@charset "UTF-8";
@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
    visibility: visible;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}
@-webkit-keyframes bounceInDown {
  from, 60%, 75%, 90%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  60% {
    opacity: 1;
    -webkit-transform: translate3d(0, 25px, 0);
    transform: translate3d(0, 25px, 0);
  }
  75% {
    -webkit-transform: translate3d(0, -10px, 0);
    transform: translate3d(0, -10px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@-webkit-keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@-webkit-keyframes shake {
  from, to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0);
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0);
  }
}
@-webkit-keyframes rotate {
  from,to {
    -webkit-transform: rotate(0);
    transform: rotate(0);
  }
  50% {
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
  }
}
@-webkit-keyframes scale {
  from,to {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
}
@-webkit-keyframes tada {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  10%, 20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }
  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }
  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@-webkit-keyframes gif1 {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -14.6rem;
  }
}
@-webkit-keyframes gif2 {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -24.8rem;
  }
}
@-webkit-keyframes gif3 {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -4.44rem;
  }
}
@-webkit-keyframes gif4 {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -5.79rem;
  }
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }
  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }
  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }
  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }
  to {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
@-webkit-keyframes hand {
  0%,50%,100% {
    -webkit-transform: translateX(0);
  }
  25% {
    -webkit-transform: translateX(-0.5rem);
  }
  75% {
    -webkit-transform: translateX(0.5rem);
  }
}
@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}
/* CSS Document */
html {
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  font-size: 62.5%;
  overflow-x: hidden;
}

ul, li, div, p, body, h1, h2, h3, h4, h5, h6, dl, dt, dd {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
  color: #2a2a2a;
}

input {
  -webkit-appearance: none;
  outline: none;
}

* {
  outline: none;
  webkit-focus-ring-color: transparent;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

body, html {
  width: 100%;
  font-family: "Microsoft YaHei", "Helvetica Neue", Arial, HelveticaNeue, Helvetica, "BBAlpha Sans", sans-serif;
  font-weight: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-align: center;
}

/* *{-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;-ms-backface-visibility: hidden;backface-visibility: hidden;} 用于解决某些情况下出现闪屏的问题，若无则不加*/
body {
  opacity: 1;
  -webkit-transition: opacity 500ms ease-in;
  transition: opacity 500ms ease-in;
  position: relative;
}

p, a, li {
  color: #434343;
}

/*common.less 此处仅给出框架样式示例，具体要根据页面类型自行调整框架样式*/
html {
  font-size: 312.5%;
}

@media screen and (min-width: 360px) and (max-width: 374px) and (orientation: portrait) {
  html {
    font-size: 351.5%;
  }
}
@media screen and (min-width: 384px) and (max-width: 399px) and (orientation: portrait) {
  html {
    font-size: 375%;
  }
}
@media screen and (min-width: 400px) and (max-width: 413px) and (orientation: portrait) {
  html {
    font-size: 390.625%;
  }
}
@media screen and (min-width: 414px) and (max-width: 431px) and (orientation: portrait) {
  html {
    font-size: 404.3%;
  }
}
@media screen and (min-width: 432px) and (max-width: 479px) and (orientation: portrait) {
  html {
    font-size: 421.875%;
  }
}
@media screen and (min-width: 480px) and (max-width: 639px) and (orientation: portrait) {
  html {
    font-size: 468.75%;
  }
}
@media screen and (min-width: 640px) and (orientation: portrait) {
  html {
    font-size: 625%;
  }
}
body, html {
  width: 100%;
  height: 100%;
  background: #fff;
}

.fixed {
  min-height: 12.06rem;
}

* {
  background-size: 100% !important;
}

#forhorview {
  position: fixed;
  z-index: 1000;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 110%;
  background: #000;
  display: none;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  box-pack: center;
}
#forhorview.show {
  display: -webkit-box;
}

#forhorview p {
  font-size: 0.6rem;
  color: #fff;
}

.clearfix:before, .clearfix:after {
  content: "";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  *zoom: 1;
}

#loading {
  width: 7.5rem;
  max-width: 100%;
  height: 100%;
  background: url(../img/loading.jpg) center no-repeat;
  position: absolute;
  z-index: 100;
  top: 0;
  left: 0;
  background-size: cover !important;
}
#loading .content {
  position: absolute;
  height: 2.2rem;
  width: 100%;
  text-align: center;
  top: 50%;
  margin-top: -1.1rem;
  font-size: 0;
}
#loading .box {
  width: 1.53rem;
  height: 1.36rem;
  background: url(../img/box.png) no-repeat;
  margin: 0 auto;
  -webkit-animation: tada 1s both infinite;
  animation: tada 1s both infinite;
}
#loading span {
  display: inline-block;
  width: 1.51rem;
  height: 0.21rem;
  background: url(../img/loading.png) no-repeat;
  margin: 0.25rem 0 0.15rem;
}
#loading .progress {
  font-size: 0.28rem;
  color: #f5263c;
  height: 0.4rem;
  line-height: 0.4rem;
}
#loading.fadeOut {
  -webkit-animation: fadeOut 1s both;
  animation: fadeOut 1s both;
}

#index {
  font-size: 0;
  text-align: center;
  width: 7.5rem;
  height: 100%;
  overflow: hidden;
  z-index: 101;
  position: absolute;
  visibility: hidden;
  background: url(../img/bg.jpg) no-repeat;
  background-size: cover !important;
}
#index .swiper-slide {
  background-size: cover !important;
}
#index .slide-1 {
  background: url(../img/girl-01.jpg) center no-repeat;
}
#index .slide-2 {
  background: url(../img/girl-02.jpg) center no-repeat;
}
#index .slide-3 {
  background: url(../img/girl-03.jpg) center no-repeat;
}
#index .slide-4 {
  background: url(../img/girl-04.jpg) center no-repeat;
}
#index .slide-5 {
  background: url(../img/girl-05.jpg) center no-repeat;
}
#index .slide-6 {
  background: url(../img/girl-06.jpg) center no-repeat;
}
#index .slide-7 {
  background: url(../img/girl-07.jpg) center no-repeat;
}
#index .slide-8 {
  background: url(../img/girl-08.jpg) center no-repeat;
}
#index .slide-9 {
  background: url(../img/girl-09.jpg) center no-repeat;
}
#index .slide-10 {
  background: url(../img/girl-10.jpg) center no-repeat;
}
#index .slide-11 {
  background: url(../img/girl-11.jpg) center no-repeat;
}
#index .slide-12 {
  background: url(../img/girl-12.jpg) center no-repeat;
}
#index .slide-13 {
  background: url(../img/girl-13.jpg) center no-repeat;
}
#index .slide-14 {
  background: url(../img/girl-14.jpg) center no-repeat;
}
#index .slide-15 {
  background: url(../img/girl-15.jpg) center no-repeat;
}
#index .slide-16 {
  background: url(../img/girl-16.jpg) center no-repeat;
}
#index .slide-17 {
  background: url(../img/girl-17.jpg) center no-repeat;
}
#index .slide-18 {
  background: url(../img/girl-18.jpg) center no-repeat;
}
#index .slide-19 {
  background: url(../img/girl-19.jpg) center no-repeat;
}
#index .slide-20 {
  background: url(../img/girl-20.jpg) center no-repeat;
}
#index .slide-21 {
  background: url(../img/girl-21.jpg) center no-repeat;
}
#index .slide-22 {
  background: url(../img/girl-22.jpg) center no-repeat;
}
#index .slide-23 {
  background: url(../img/girl-23.jpg) center no-repeat;
}
#index .slide-24 {
  background: url(../img/girl-24.jpg) center no-repeat;
}
#index .slide-25 {
  background: url(../img/girl-25.jpg) center no-repeat;
}
#index .slide-26 {
  background: url(../img/girl-26.jpg) center no-repeat;
}
#index .slide-27 {
  background: url(../img/girl-27.jpg) center no-repeat;
}
#index .slide-28 {
  background: url(../img/girl-28.jpg) center no-repeat;
}
#index .slide-29 {
  background: url(../img/girl-29.jpg) center no-repeat;
}
#index .slide-30 {
  background: url(../img/girl-30.jpg) center no-repeat;
}
#index .slide-31 {
  background: url(../img/girl-31.jpg) center no-repeat;
}
#index .slide-32 {
  background: url(../img/girl-32.jpg) center no-repeat;
}
#index .slide-33 {
  background: url(../img/girl-33.jpg) center no-repeat;
}
#index .slide-34 {
  background: url(../img/girl-34.jpg) center no-repeat;
}
#index .slide-35 {
  background: url(../img/girl-35.jpg) center no-repeat;
}
#index .swiper-container {
  width: 100%;
  height: 100%;
}
#index .hdj {
  width: 3.7rem;
  height: 3.1rem;
  background: url(../img/hdj.png) no-repeat;
  position: absolute;
  left: 0.32rem;
  top: -1rem;
  z-index: 2;
}
#index .title {
  width: 3.97rem;
  height: 1.77rem;
  background: url(../img/title.png) no-repeat;
  position: absolute;
  left: 50%;
  margin-left: -1.98rem;
  top: 2.79rem;
  z-index: 2;
}
#index .shake-box {
  width: 1.12rem;
  height: 1.29rem;
  position: absolute;
  top: 3.98rem;
  right: 0.82rem;
  z-index: 2;
  opacity: 0;
}
#index .shake-box .shake {
  display: inline-block;
  width: 1.12rem;
  height: 1.29rem;
  background: url(../img/shake.png) no-repeat;
}
#index .shake-box.show {
  -webkit-animation: bounceIn 0.75s both;
  animation: bounceIn 0.75s both;
}
#index .shake-box.show .shake {
  -webkit-animation: tada 1s both infinite 0.75s;
  animation: tada 1s both infinite 0.75s;
}
#index .logo {
  position: absolute;
  display: inline-block;
  width: 2.72rem;
  height: 0.79rem;
  background: url(../img/logo-2.png) no-repeat;
  top: 0.72rem;
  left: 50%;
  margin-left: -1.36rem;
}
#index.fadeIn {
  visibility: visible;
  -webkit-animation: fadeIn 0.5s both;
  animation: fadeIn 0.5s both;
}
#index.fadeOut {
  -webkit-animation: fadeOut 0.5s both;
  animation: fadeOut 0.5s both;
}

#gril {
  width: 7.5rem;
}

#reward {
  width: 7.5rem;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  z-index: 80;
  visibility: hidden;
}
#reward .logo {
  display: inline-block;
  width: 2.72rem;
  height: 0.79rem;
  background: url(../img/logo-2.png) no-repeat;
  margin-top: 0.72rem;
}
#reward .want {
  display: inline-block;
  width: 1.45rem;
  height: 2.33rem;
  background: url(../img/want.png) no-repeat;
  position: absolute;
  right: 0.38rem;
  bottom: 0.47rem;
  -webkit-animation: scale 1s both infinite;
  animation: scale 1s both infinite;
}
#reward.fadeOut {
  -webkit-animation: fadeOut 1s both;
  animation: fadeOut 1s both;
}
#reward .animate {
  position: absolute;
}
#reward.fadeIn {
  visibility: visible;
  -webkit-animation: fadeIn 1s both;
  animation: fadeIn 1s both;
}

.reward-1 {
  background: url(../img/p-1-1.jpg) center no-repeat;
  background-size: cover !important;
}
.reward-1 .animate {
  top: 3.17rem;
  left: 2.08rem;
  display: inline-block;
  width: 2.53rem;
  height: 2.92rem;
  background: url(../img/animate-1.png) 0 -11.68rem no-repeat;
  background-size: 2.53rem 14.6rem !important;
  -webkit-animation: gif1 1s steps(5) 1 1s backwards;
}

.reward-2 {
  background: url(../img/p-2-1.jpg) center no-repeat;
  background-size: cover !important;
}
.reward-2 .animate {
  bottom: 2.62rem;
  right: 0.88rem;
  display: inline-block;
  width: 3.65rem;
  height: 6.2rem;
  background: url(../img/animate-2.png) 0 -18.6rem no-repeat;
  background-size: 3.65rem 24.8rem !important;
  -webkit-animation: gif2 1s steps(4) 1 1s backwards;
}

.reward-3 {
  background: url(../img/p-3-1.jpg) center no-repeat;
  background-size: cover !important;
}
.reward-3 .animate {
  top: 3.38rem;
  left: 2.15rem;
  display: inline-block;
  width: 0.91rem;
  height: 1.2rem;
  background: url(../img/animate-3.png) no-repeat;
  -webkit-animation: tada 1s 1s both;
}

.reward-4 {
  background: url(../img/p-4-1.jpg) center no-repeat;
  background-size: cover !important;
}
.reward-4 .animate {
  top: 2.81rem;
  left: 2.39rem;
  display: inline-block;
  width: 2.21rem;
  height: 1.93rem;
  background: url(../img/animate-4.png) 0 -3.86rem no-repeat;
  background-size: 2.21rem 5.79rem !important;
  -webkit-animation: gif4 1s steps(3) 1 1s backwards;
}

#result {
  width: 7.5rem;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  z-index: 81;
  visibility: hidden;
  opacity: 0;
  background-color: #bd3237;
}
#result .txt {
  position: absolute;
  width: 100%;
  height: 1.99rem;
  text-align: center;
  left: 0;
  bottom: 3.65rem;
}
#result .txt img {
  display: none;
  height: 1.99rem;
}
#result.fadeIn {
  visibility: visible;
  -webkit-animation: fadeIn 1s both;
  animation: fadeIn 1s both;
}
#result.fadeOut {
  -webkit-animation: fadeOut 1s both;
  animation: fadeOut 1s both;
}

.back-btn {
  display: block;
  position: absolute;
  width: 0.42rem;
  height: 0.42rem;
  left: 0.2rem;
  top: 0.2rem;
  background: url(../img/back-ico.png);
}

.result-1 {
  background: url(../img/p-1-2.jpg) center center no-repeat;
  background-size: cover !important;
}
.result-1 .txt-1 {
  display: inline-block !important;
}

.result-2 {
  background: url(../img/p-2-2.jpg) center center no-repeat;
  background-size: cover !important;
}
.result-2 .txt-2 {
  display: inline-block !important;
}

.result-3 {
  background: url(../img/p-3-2.jpg) center center no-repeat;
  background-size: cover !important;
}
.result-3 .txt-3 {
  display: inline-block !important;
}

.result-4 {
  background: url(../img/p-4-2.jpg) center center no-repeat;
  background-size: cover !important;
}
.result-4 .txt-4 {
  display: inline-block !important;
}

.subForm {
  display: inline-block;
  width: 2.98rem;
  height: 1.04rem;
  background: url(../img/submit.png) no-repeat;
  position: absolute;
  left: 2.34rem;
  bottom: 0.98rem;
}

.formset {
  font-size: 0;
  height: 0.63rem;
}
.formset .item {
  display: inline-block;
  height: 0.63rem;
  padding: 0 0.12rem;
  line-height: 0.63rem;
  background: #d78c90;
  margin-left: 0.12rem;
  vertical-align: top;
  float: left;
}
.formset label {
  color: #000;
  font-size: 0.33rem;
  display: inline-block;
  height: 0.63rem;
  line-height: 0.63rem;
  vertical-align: top;
}
.formset input {
  font-size: 0.3rem;
  height: 0.43rem;
  line-height: 0.43rem;
  margin: 0;
  padding: 0;
  outline: none;
  margin-top: 0.11rem;
  background: #fff;
  width: 1.2rem;
  border: 0;
  background: transparent;
  vertical-align: top;
}
.formset #tel {
  width: 2.1rem;
}

.layui-m-layer .layui-m-layershade {
  background: rgba(0, 0, 0, 0.3);
}
.layui-m-layer .layer-alert {
  width: 5.4rem !important;
  max-width: 5.4rem !important;
}
.layui-m-layer .layer-alert .layui-m-layercont {
  font-size: 0.3rem;
  color: #000;
  line-height: 0.6rem;
}

#success {
  visibility: hidden;
  width: 7.5rem;
  height: 100%;
  z-index: 82;
  background: url(../img/bg-success.jpg) center no-repeat;
  background-size: cover !important;
  position: relative;
  text-align: center;
  font-size: 0;
  opacity: 0;
}
#success .logo {
  display: inline-block;
  width: 2.72rem;
  height: 0.79rem;
  background: url(../img/logo.png) no-repeat;
  margin-top: 0.72rem;
}
#success .txt-success {
  display: inline-block;
  width: 5.98rem;
  height: 0.63rem;
  background: url(../img/success.png) no-repeat;
  margin-top: 1.9rem;
}
#success .des {
  width: 5.8rem;
  font-size: 0.36rem;
  color: #fff;
  text-align: center;
  line-height: 0.6rem;
  margin: 0.72rem auto 0.64rem;
  padding: 0.25rem 0;
  border-bottom: 0.04rem solid #fff;
  border-top: 0.04rem solid #fff;
}
#success .btn-group a {
  display: inline-block;
  vertical-align: top;
  margin: 0 0.27rem;
}
#success .btn-group .try {
  width: 2.98rem;
  height: 1.04rem;
  background: url(../img/try.png) no-repeat;
}
#success .btn-group .share {
  width: 2.78rem;
  height: 0.89rem;
  background: url(../img/share.png) no-repeat;
}
#success.fadeIn {
  visibility: visible;
  -webkit-animation: fadeIn 0.5s both;
  animation: fadeIn 0.5s both;
}

.share-box {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  left: 0;
  top: 0;
  z-index: 200;
  display: none;
  -webkit-transition: opacity ease .3s;
  opacity: 0;
}
.share-box.show {
  opacity: 1;
}
.share-box img {
  position: absolute;
  left: 1.7rem;
  top: 2.44rem;
  width: 4.13rem;
}

.menu-box {
  width: 0.89rem;
  position: absolute;
  right: 0;
  top: 0;
  text-align: center;
  z-index: 10;
  font-size: 0;
  padding-bottom: 0.28rem;
  height: 0.5rem;
  overflow: hidden;
}
.menu-box a {
  margin-top: 0.28rem;
}
.menu-box .menu {
  display: inline-block;
  width: 0.51rem;
  height: 0.34rem;
  background: url(../img/menu.png) no-repeat;
}
.menu-box .rule {
  display: inline-block;
  width: 0.69rem;
  height: 0.76rem;
  background: url(../img/rule.png) no-repeat;
}
.menu-box .product {
  display: inline-block;
  width: 0.71rem;
  height: 0.81rem;
  background: url(../img/product.png) no-repeat;
}
.menu-box.show {
  -webkit-transition: height 0.3s;
  transition: height 0.3s;
  height: 2.8rem;
  background: rgba(255, 255, 255, 0.8);
}
.menu-box.menu-white .menu {
  width: 0.49rem;
  height: 0.32rem;
  background: url(../img/menu-2.png) no-repeat;
}
.menu-box.menu-white .rule {
  background: url(../img/rule-2.png) no-repeat;
}
.menu-box.menu-white .product {
  background: url(../img/product-2.png) no-repeat;
}
.menu-box.menu-white.show {
  background: rgba(0, 0, 0, 0.8);
}

#rule-box, #win-box {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  left: 0;
  top: 0;
  z-index: 200;
  display: none;
  -webkit-transition: opacity ease .3s;
  opacity: 0;
}
#rule-box.show, #win-box.show {
  opacity: 1;
}
#rule-box .content, #win-box .content {
  width: 6.86rem;
  height: 11.42rem;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -5.71rem 0 0 -3.43rem;
}
#rule-box img, #win-box img {
  width: 100%;
}
#rule-box .close, #win-box .close {
  display: inline-block;
  width: 0.49rem;
  height: 0.46rem;
  background: url(../img/close.png) no-repeat;
  position: absolute;
  top: 0.48rem;
  right: 0.48rem;
}

#win-box .content {
  width: 6.91rem;
  height: 11.5rem;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -5.75rem 0 0 -3.455rem;
}

iframe {
  width: 7.5rem;
  position: absolute;
  font-size: 0;
  height: 0.63rem;
  position: absolute;
  bottom: 2.56rem;
  left: 0rem;
  border: 0;
  margin: 0;
  padding: 0;
}

#product-box {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  left: 0;
  top: 0;
  z-index: 200;
  display: none;
  -webkit-transition: opacity ease .3s;
  opacity: 0;
}
#product-box.show {
  opacity: 1;
}
#product-box .back {
  width: 0.42rem;
  height: 0.42rem;
  background: url(../img/back.png) no-repeat;
  position: absolute;
  top: 0.17rem;
  left: 0.22rem;
  z-index: 2;
}
#product-box .grey {
  background: url(../img/back-2.png) no-repeat;
}

.guide {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 2;
}
.guide img {
  width: 5.93rem;
  margin: 0.92rem 0 0 0.64rem;
}
.guide .icon-back {
  width: 0.42rem;
  height: 0.42rem;
  background: url(../img/back.png) no-repeat;
  position: absolute;
  top: 0.17rem;
  left: 0.22rem;
}
.guide .hand {
  display: inline-block;
  width: 1.28rem;
  height: 1.68rem;
  background: url(../img/hand.png) no-repeat;
  position: absolute;
  top: 5.2rem;
  left: 3.13rem;
  -webkit-animation: hand 1.6s linear infinite;
}

#productSwiper {
  width: 7.5rem;
  height: 100%;
}

.swiper-slide img {
  position: absolute;
  opacity: 0;
}

.swiper-slide-active .word-1 {
  -webkit-animation: fadeInDown 0.75s both;
}
.swiper-slide-active .word-2 {
  -webkit-animation: fadeInUp 0.75s both 0.25s;
}

.slide-1 {
  background: url(../img/slide-1.jpg) center center no-repeat;
  background-size: cover !important;
}
.slide-1 .word-1 {
  width: 3.3rem;
  top: 0.4rem;
  left: 2.1rem;
}
.slide-1 .word-2 {
  width: 5.22rem;
  bottom: 1.06rem;
  left: 1.07rem;
}

.slide-2 {
  background: url(../img/slide-2.jpg) center center no-repeat;
  background-size: cover !important;
}
.slide-2 .word-1 {
  width: 3.86rem;
  top: 0.82rem;
  left: 0.32rem;
}
.slide-2 .word-2 {
  width: 4.36rem;
  bottom: 1.3rem;
  left: 0.42rem;
}

.slide-3 {
  background: url(../img/slide-3.jpg) center center no-repeat;
  background-size: cover !important;
}
.slide-3 .word-1 {
  width: 3.03rem;
  top: 0.55rem;
  right: 0.16rem;
}
.slide-3 .word-2 {
  width: 4.07rem;
  bottom: 2.54rem;
  left: 0.42rem;
}

.slide-4 {
  background: url(../img/slide-4.jpg) center center no-repeat;
  background-size: cover !important;
}
.slide-4 .word-1 {
  width: 3.1rem;
  top: 0.91rem;
  left: 0.41rem;
}
.slide-4 .word-2 {
  width: 4.07rem;
  bottom: 1.03rem;
  right: 0.5rem;
}

.slide-5 {
  background: url(../img/slide-5.jpg) center center no-repeat;
  background-size: cover !important;
}
.slide-5 .word-1 {
  width: 3.03rem;
  top: 0.57rem;
  left: 2.23rem;
}
.slide-5 .word-2 {
  width: 5.13rem;
  bottom: 1.2rem;
  left: 1.2rem;
}

.slide-6 {
  background: url(../img/slide-6.jpg) center center no-repeat;
  background-size: cover !important;
}
.slide-6 .word-1 {
  width: 3.03rem;
  top: 1.17rem;
  left: 0.25rem;
}
.slide-6 .word-2 {
  width: 4.27rem;
  bottom: 1.03rem;
  left: 1.6rem;
}

.slide-7 {
  background: url(../img/slide-7.jpg) center center no-repeat;
  background-size: cover !important;
}
.slide-7 .word-1 {
  width: 3.32rem;
  top: 1.73rem;
  right: 0.12rem;
}
.slide-7 .word-2 {
  width: 3.74rem;
  bottom: 0.92rem;
  right: 0.47rem;
}

.slide-8 {
  background: url(../img/slide-8.jpg) center center no-repeat;
  background-size: cover !important;
}
.slide-8 .word-1 {
  width: 3.3rem;
  top: 0.47rem;
  right: 0.2rem;
}
.slide-8 .word-2 {
  width: 5.36rem;
  bottom: 0.85rem;
  left: 0.4rem;
}

.slide-9 {
  background: url(../img/slide-9.jpg) center center no-repeat;
  background-size: cover !important;
}
.slide-9 .word-1 {
  width: 3.06rem;
  bottom: 4.78rem;
  left: 0.3rem;
}
.slide-9 .word-2 {
  width: 5.67rem;
  bottom: 1.03rem;
  left: 0.9rem;
}

.product-box {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0.93rem;
}
.product-box .product {
  display: inline-block;
  width: 0.79rem;
  height: 1.03rem;
  background: url(../img/more.png) no-repeat;
  -webkit-animation: tada 1s both infinite;
  animation: tada 1s both infinite;
}
.product-box p {
  font-size: 0.34rem;
  color: #fff;
  line-height: 0.4rem;
  margin-top: 0.22rem;
}

.publish {
  display: inline-block;
  width: 2.54rem;
  height: 0.8rem;
  background: url(../img/btn.png) no-repeat;
  position: absolute;
  top: 10.44rem;
  left: 2.59rem;
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2 / 3) {
  html, body {
    height: 12.06rem;
  }
}
